<template>
	<view class="post-user flex align-item_center justify-content_space-between">
		<view class="info flex align-item_center">
			<up-avatar :src="props.item.avatar" size="54rpx"></up-avatar>
			<view class="info-data">
				<view class="name">{{props.item.userName ||props.item.nickname || props.item.userId}}</view>
				<view class="time" v-if="props.type === 'default' && props.time">
					{{dayjs(props.item.createTime).format('YYYY.MM.DD')}}
				</view>
			</view>
			<view class="operation" v-if="props.operation">{{props.operation}}了你的攻略</view>
		</view>
		<template v-if="props.type === 'default' && +props.item.userId !== +user.id && props.follow">
			<view v-if="props.item.followStatus" class="button button2 flex align-item_center justify-content_center"
				@click="changeFollowStatus">
				<text>已关注</text>
			</view>
			<view v-else class="button flex align-item_center justify-content_center" @click="changeFollowStatus">
				<up-icon name="plus" color="#EDFAFF" size="20rpx" bold></up-icon>
				<text>关注</text>
			</view>
		</template>

		<view class="reviewTime" v-else-if="props.type === 'review'">{{dayjs(props.item.createTime).format('YYYY.MM.DD')}}
		</view>
	</view>
</template>

<script setup>
	import dayjs from "dayjs"
	import openApi from "@/api/biz/open";
	import {
		msg
	} from "@/utils/tool.js"
	const props = defineProps({
		follow: {
			type: Boolean,
			default: true,
		},
		item: {
			type: Object,
			default: {}
		},
		time: {
			type: Boolean,
			default: true
		},
		operation: {
			type: String,
			default: undefined
		},
		type: {
			type: String,
			default: "default"
		}
	})
	const user = uni.getStorageSync('userInfo')

	const emit = defineEmits(['changeFollowStatus'])

	function changeFollowStatus() {
		if (props.item.followStatus) {
			openApi.deleteFollow(props.item.userId).then(res => {
				if (res.code === 0) {
					msg("已取消关注")
					emit('changeFollowStatus', props.item.id)
				}
			})
		} else {
			openApi.createUserFollow(props.item.userId).then(res => {
				if (res.code === 0) {
					msg("关注成功")
					emit('changeFollowStatus', props.item.id)
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.post-user {
		.reviewTime {
			font-weight: 500;
			font-size: 20rpx;
			color: #EDFAFF;
			opacity: 0.5;
		}

		.operation {
			margin-left: 29rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #4E96E9;
		}

		.button {
			width: 130rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: linear-gradient(85deg, #0D7BFA 0%, #7E76E3 100%);
			border-radius: 100rpx;
			text-align: center;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #EDFAFF;
				margin-left: 4rpx;
			}
		}

		.button2 {
			background: #EDFAFF;

			text {
				color: #0076FF;
			}
		}

		.info {
			&-data {
				margin-left: 20rpx;

				.time {
					font-weight: 500;
					font-size: 20rpx;
					color: #EDFAFF;
					opacity: 0.5;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #EDFAFF;
				}
			}
		}
	}
</style>